<template>
  <div class="relative">
    <div v-if="showAnimation" class="fixed inset-0 bg-black/30 z-40 flex items-center justify-center">
      <div class="bg-green-800/90 rounded-xl w-full max-w-md p-4 shadow-2xl">
        <div class="flex flex-col items-center">
          <h2 class="text-xl text-white mb-6 font-bold text-center">发牌中...</h2>
          
          <!-- 发牌动画区域 -->
          <div class="flex flex-col w-full mb-4">
            <!-- 玩家牌区 -->
            <div class="flex justify-center mb-8">
              <div class="text-center">
                <p class="text-blue-200 mb-2 font-bold text-sm">闲家</p>
                <div class="flex justify-center space-x-3">
                  <div 
                    v-for="(card, index) in playerCards" 
                    :key="'player-'+index"
                    class="w-16 h-24 bg-white rounded-md shadow-md flex items-center justify-center transform transition-all duration-300 font-mono border border-blue-300"
                    :class="[getCardAnimation(index, 'player')]"
                    :style="{ zIndex: index }"
                  >
                    <span :class="{'text-red-600': isRedCard(card), 'text-black': !isRedCard(card)}">{{ card }}</span>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 庄家牌区 -->
            <div class="flex justify-center">
              <div class="text-center">
                <p class="text-pink-200 mb-2 font-bold text-sm">庄家</p>
                <div class="flex justify-center space-x-3">
                  <div 
                    v-for="(card, index) in bankerCards" 
                    :key="'banker-'+index"
                    class="w-16 h-24 bg-white rounded-md shadow-md flex items-center justify-center transform transition-all duration-300 font-mono border border-pink-300"
                    :class="[getCardAnimation(index, 'banker')]"
                    :style="{ zIndex: index }"
                  >
                    <span :class="{'text-red-600': isRedCard(card), 'text-black': !isRedCard(card)}">{{ card }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 结果区 -->
          <div v-if="showResult" class="mt-4 w-full slide-in-bottom">
            <div class="bg-white/20 p-4 rounded-lg text-center">
              <p class="text-lg font-bold mb-2" :class="resultClass">{{ resultText }}</p>
              <p v-if="win && betAmount > 0" class="text-green-300 font-bold text-xl win-pulse">
                +{{ (payout - betAmount).toFixed(2) }}
              </p>
              <p v-else-if="betAmount > 0 && result === 'tie' && betChoice !== 'tie'" class="text-white font-bold text-xl">
                0.00
              </p>
              <p v-else-if="betAmount > 0" class="text-red-300 font-bold text-xl">
                -{{ betAmount.toFixed(2) }}
              </p>
              <p v-else class="text-white font-bold text-xl">
                观战模式
              </p>
            </div>
          </div>
          
          <button 
            v-if="showCloseButton"
            @click="$emit('close')" 
            class="mt-6 px-5 py-2 bg-white/20 hover:bg-white/30 text-white rounded-lg transition-colors"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as GameUtils from '../logic/GameUtils';

export default {
  name: 'CardAnimation',
  props: {
    showAnimation: {
      type: Boolean,
      default: false
    },
    playerCards: {
      type: Array,
      default: () => []
    },
    bankerCards: {
      type: Array,
      default: () => []
    },
    result: {
      type: String,
      default: ''
    },
    win: {
      type: Boolean,
      default: false
    },
    payout: {
      type: Number,
      default: 0
    },
    betAmount: {
      type: Number,
      default: 0
    },
    betChoice: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      playerCardsVisible: [],
      bankerCardsVisible: [],
      currentStep: 0,
      animationSteps: [
        'deal-initial',   // 0: 初始发牌状态
        'deal-player-1',  // 1: 玩家第一张牌
        'deal-banker-1',  // 2: 庄家第一张牌
        'deal-player-2',  // 3: 玩家第二张牌
        'deal-banker-2',  // 4: 庄家第二张牌
        'check-natural',  // 5: 检查是否需要补牌
        'deal-player-3',  // 6: 玩家补第三张牌
        'deal-banker-3',  // 7: 庄家补第三张牌
        'show-result'     // 8: 显示结果
      ],
      showResult: false,
      showCloseButton: false
    }
  },
  computed: {
    resultText() {
      if (!this.result) return '';
      
      const resultMap = {
        'player': '闲家赢',
        'banker': '庄家赢',
        'tie': '和局'
      };
      
      return resultMap[this.result] || '';
    },
    resultClass() {
      if (this.result === 'player') {
        return 'text-blue-300';
      } else if (this.result === 'banker') {
        return 'text-red-300';
      } else {
        return 'text-green-300';
      }
    }
  },
  watch: {
    showAnimation(newVal) {
      if (newVal) {
        this.startAnimation();
      } else {
        this.resetAnimation();
      }
    }
  },
  methods: {
    startAnimation() {
      this.resetAnimation();
      this.runNextStep();
    },
    resetAnimation() {
      this.currentStep = 0;
      this.playerCardsVisible = [];
      this.bankerCardsVisible = [];
      this.showResult = false;
      this.showCloseButton = false;
    },
    runNextStep() {
      if (this.currentStep >= this.animationSteps.length) {
        return;
      }
      
      const step = this.animationSteps[this.currentStep];
      let delayMs = 300; // 减少基础延迟时间
      
      switch(step) {
        case 'deal-initial':
          // 初始化，不需要操作
          delayMs = 200;
          break;
        case 'deal-player-1':
          if (this.playerCards.length > 0) {
            this.playerCardsVisible = [this.playerCards[0]];
          }
          break;
        case 'deal-banker-1':
          if (this.bankerCards.length > 0) {
            this.bankerCardsVisible = [this.bankerCards[0]];
          }
          break;
        case 'deal-player-2':
          if (this.playerCards.length > 1) {
            this.playerCardsVisible = this.playerCards.slice(0, 2);
          }
          break;
        case 'deal-banker-2':
          if (this.bankerCards.length > 1) {
            this.bankerCardsVisible = this.bankerCards.slice(0, 2);
          }
          delayMs = 500; // 给更多时间看牌面，但比之前快
          break;
        case 'check-natural':
          // 延时，让用户观察初始牌
          delayMs = 500;
          break;
        case 'deal-player-3':
          if (this.playerCards.length > 2) {
            this.playerCardsVisible = [...this.playerCards];
            delayMs = 500;
          } else {
            delayMs = 50; // 没有第三张牌，快速跳过
          }
          break;
        case 'deal-banker-3':
          if (this.bankerCards.length > 2) {
            this.bankerCardsVisible = [...this.bankerCards];
            delayMs = 500;
          } else {
            delayMs = 50; // 没有第三张牌，快速跳过
          }
          break;
        case 'show-result':
          this.showResult = true;
          this.showCloseButton = true;
          delayMs = 1500; // 停留在结果页，但比之前短
          break;
      }
      
      this.currentStep++;
      
      if (this.currentStep < this.animationSteps.length) {
        setTimeout(() => {
          this.runNextStep();
        }, delayMs);
      }
    },
    getCardAnimation(index, type) {
      const visibleCards = type === 'player' ? this.playerCardsVisible : this.bankerCardsVisible;
      const allCards = type === 'player' ? this.playerCards : this.bankerCards;
      
      // 确保只显示最多3张牌
      if (index >= 3 || index >= visibleCards.length) {
        return 'opacity-0 scale-50';
      }
      
      // 给每张可见的牌添加动画
      return 'slide-in-top opacity-100 delay-100';
    },
    isRedCard(card) {
      return GameUtils.isRedCard(card);
    }
  }
}
</script>

<style scoped>
.slide-in-top {
  animation: slideInTop 0.4s ease-out;
}

.slide-in-bottom {
  animation: slideInBottom 0.5s ease-out;
}

@keyframes slideInTop {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.win-pulse {
  animation: pulse 0.7s ease-in-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
</style> 